<template>
	<view class="order-item-wrap">
		<view class="order-item-header">
			<view class="header-order-number">
				Order number：{{item.order_sn}}
			</view>
		</view>
		<view class="order-item-conter" v-for="it,ind in item.order_items" :key="ind">
			<img class="order-image" :src="`${$imghttps}${it.goods_sku_info.sku_images}`" mode=""></img>
			<view class="conter-box">
				<view class="conter-title">{{it.goods_title}}</view>
				<view class="conter-num conter-sku">
					<text>{{it.goods_sku_info.color}}</text>
					<text>{{it.goods_sku_info.sku_nuber}}</text>
					<text>{{it.goods_sku_info.material_quality}}</text>
				</view>
				<view class="conter-num conter-sku">
					<text>{{setPrice(it.goods_sku_info.local_price)}}/{{it.price_mode == 1?"Dozen":""}}{{it.price_mode == 2?"Piece":""}}</text>
					<text>
						{{setPrice(it.value)}}/Ctn
					</text>
				</view>
				<view class="conter-num conter-sku">Quantity：{{it.goods_number}}Ctn</view>
				<view class="conter-num flex">
          <view class="txt-l">Total：{{setPrice(item.pay_money)}}</view>
          <view class="txt-r" @tap="handleDo(item)"><text>doing</text></view>
        </view>
			</view>
		</view>
	</view>
</template>

<script>
import utils from '../../utils';
	export default {
		props: {
			item: {
				type: Object,
				default () {
					return {

					}
				}
			},
			index: {
				type: Number,
				default: 0
			},
			tabBarCode: {
				type: Number,
				default: 0
			}
		},
		data:{
			checkedList:[]
		},
		components: {
		},
		methods: {
      handleDo(item){
        this.$ajax(`${this.$http}/order/setPending?id=${item.id}`, "GET", null, (response) => {
					let data = JSON.parse(response)
          if(data.code==200){
            uni.navigateBack()
					}else{
						uni.showToast({
							title: data.msg||'系统异常',
							icon: "none"
						})
					}
				})
      },
			handleChange(e,id){
				this.$emit('selectOrderIds', {
					order_id: id,
					order_index: this.index
				})
			},
			// 价格
			setPrice(price) {
				return utils.setPrice(price)
			},
			async getOrderInfo() {
				this.$emit('refresh', this.item)
			},
			onPaymentClick() {
				this.$emit('payment', this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-order-status {
		color: #f30;
	}
	.buton {
		min-width: 156rpx;
		height: 60rpx;
		color: #FFFFFF;
		border-radius: 62rpx;
		background-color: #FF3C3F;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		margin: 0rpx 10rpx;
		padding: 0 20rpx;
	}

	.buton_one {
		min-width: 108rpx;
		height: 60rpx;
		border-radius: 62rpx;
		border: 1rpx solid #FF3C3F;
		background-color: #FFFFFF;
		color: #FF3C3F;
		font-size: 24rpx;
		font-weight: 400rpx;
		text-align: center;
		line-height: 60rpx;
		padding: 0 20rpx;
	}

	.order-item-wrap {
		width: 100%;
		background: #fff;

		.order-item-header {
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			padding: 0 24rpx;   
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			font-size: 26rpx;
			.header-order-number {
				font-size: 28rpx;
				color: #999;
			}
		}
		.order-item-conter {
			border-bottom: 1px solid #dfdfdf;
			border-top: 1px solid #dfdfdf;
			padding: 20rpx;
			display: flex;
			flex-direction: row;

			.order-image {
				width: 180rpx;
				height: 180rpx;
			}
			.conter-box {
				margin-left: 20rpx;
				flex: 1;
				width: 100%;

				.conter-num {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}
        .conter-num.flex{
          display: flex;
          justify-content: space-between;
          align-items: center;
          view{
            flex: 1;
            text{
              display: inline-block;
              width: 46px;
              height: 30px;
              font-weight: 600;
              text-align: center;
              line-height: 30px;
              color: #FF3C3F;
              border: 1px solid #FF3C3F;
              border-radius: 6px;
            }
          }
          view.txt-r{
            display: flex;
            justify-content: flex-end;
          }
        }

				.conter-sku {
					flex-direction: row;
					margin-bottom: 0;

					text {
						margin-right: 20rpx;
					}
				}
			}
		}

		.order-item-footer {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			line-height: 84rpx;
			padding: 0 24rpx;

			.footer-totle {
				flex-direction: row;
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>